<template>
		<view>
			<base-drawer 
				mode="bottom"
				maskClosable mask
				:visible="instal.show" 
				background-color="transparent" @close="close"
			>
				<view class="w-full bg--w111-f5f5f5 rd-t-40rpx">
					<view style="text-align: center;padding: 20upx 0;">
						<view class="fs-32">租金支付计划</view>
						<view class="fs-20 mt-10 text--w111-8e8e8e">可提前主动支付</view>
					</view>
					<view class="px-20 main">
            <view class="list-box">
              <view class="tit">租金详情</view>
              <view class="con">租金总额
                <text class="mr-10 fw-bold" v-if="is_super">￥0</text>
                <text :class="{'line-money':is_super}" class="fw-bold">￥{{ instal.item.priceGroup.totalPrice }}</text>
              </view>
            </view>
            <view class="list-box">
              <view class="tit">扣款计划</view>
              <view class="con">
                <scroll-view scroll-y="true" style="max-height: 46vh;min-height:30vh">
                  <view class="item flex mb-26" v-for="(item,index) in instal.item.list">
                    <view class="l mr-32">
                      <view class="txt"> 第{{item.num}}期</view>
                      <view class="time mt-10"> {{getTime(item.dead_line*1000)}}</view>
                    </view>
                    <view class="r flex">
                      <view class="dot">
                        <view v-if="index!=instal.item.list.length-1" class="line"></view>
                      </view>
                      <view class="txt">
                        <text class="fw-bold" v-if="item.num!=1">
<!--                          0元随心租-->
                          <text class="mr-10" v-if="is_super">￥0</text>
<!--                          真实价格-->
                          <text :class="{'line-money':is_super}">￥{{ item.amount }}</text>
                        </text>
<!--                        第一期：显示首期实付-->
                        <text class="fw-bold" v-else>￥{{ totalPrice }}</text>
                        <text class="fs-24 ml-6" v-if="item.num==1&&instal.item.priceGroup.addServicePrice>0">(含增值服务)</text>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>

<!--						<scroll-view scroll-y="true" style="max-height: 70vh">-->
<!--							<view class="coupon-list">-->
<!--                <view class="item" v-for="(item,index) in instal.item.list">-->
<!--                  <view>第{{item.num}}期</view>-->
<!--                  <view>￥{{ item.amount }}</view>-->
<!--                  <view>{{ getTime(item.dead_line*1000) }}</view>-->
<!--                  <view class="one" v-if="item.num==1">今日支付</view>-->
<!--                </view>-->
<!--&lt;!&ndash;								<view class="item">&ndash;&gt;-->
<!--&lt;!&ndash;									<view>第1期</view>&ndash;&gt;-->
<!--&lt;!&ndash;									<view>￥{{ instal.item.first }}</view>&ndash;&gt;-->
<!--&lt;!&ndash;									<view>{{ getTime(0) }}</view>&ndash;&gt;-->
<!--&lt;!&ndash;									<view class="one" v-if="!paid">今日支付</view>&ndash;&gt;-->
<!--&lt;!&ndash;								</view>&ndash;&gt;-->
<!--&lt;!&ndash;								<template v-if="instal.item.num">&ndash;&gt;-->
<!--&lt;!&ndash;								<view class="item" v-for="(e, i) in instal.item.num" :key="i">&ndash;&gt;-->
<!--&lt;!&ndash;									<view>第{{ i + 2 }}期</view>&ndash;&gt;-->
<!--&lt;!&ndash;									<view>￥{{ instal.item.rent }}</view>&ndash;&gt;-->
<!--&lt;!&ndash;									<view>{{ getTime(i + 1) }}</view>&ndash;&gt;-->
<!--&lt;!&ndash;								</view>&ndash;&gt;-->
<!--&lt;!&ndash;								</template>&ndash;&gt;-->
<!--							</view>-->
<!--						</scroll-view>-->
					</view>
				</view>
			</base-drawer>
		</view>
</template>

<script>
	import baseDrawer from '@/components/tui-drawer/tui-drawer.vue';
  import moment from "moment";
	export default {
		components: { baseDrawer },
		props: {
      paid:{ type: Boolean, default: false },
			show: { type: Boolean, default: false },
			instal: { type: Object, default: () => {
				return { show: false, item: { first: 0, rent: 0, num: null } }
			}},
      totalPrice:{},
      is_super:''
		},
		data() {
			return {
				now: new Date()
			}
		},
		watch: {
			instal(newVal) {
				if(newVal.show) this.now = new Date()
			}
		},
		methods: {
			close: function () {
				this.$emit('close');
			},
			getTime: function (i) {
        return moment(i).format('YYYY-MM-DD')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-list{
		gap: 10px;
		padding: 0;
		display: grid;
		margin-bottom: 120rpx;
		grid-template-columns: repeat(2, 1fr);
		.item{
			display: flex;
			margin-bottom: 0;
			position: relative;
			align-items: center;
			border-radius: 10upx;
			flex-direction: column;
			background-color: #fff;
			justify-content: center;
			
			& view:nth-child(1){
				font-size: 24upx;
			}
			& view:nth-child(2){
				font-size: 32upx;
			}
			& view:nth-child(3){
				font-size: 24upx;
				color: #ccc;
			}
			.one{
				top: 0;
				left: 0;
				color: #fff;
				padding: 0 10upx;
				font-size: 24upx;
				position: absolute;
				background-color: red;
				border-radius: 10upx 0 10upx 0;
			}
		}
	}
  .main{
    padding: 20rpx 20rpx 30rpx;
    .list-box{
      display: flex;
      margin-bottom: 52rpx;
      .con{
        .l{
          width: 180rpx;
        }
      }
      .tit{
        color: #aaa;
        margin-right: 72rpx;
      }
      .time{
        color: #aaa;
      }
      .dot{
        background: #ccc;
        width: 18rpx;
        height: 18rpx;
        top: 10rpx;
        border-radius: 50%;
        position: relative;
        margin-right: 20rpx;
        .line{
          width: 2rpx;
          height: 92rpx;
          background: #ccc;
          position: absolute;
          bottom: -92rpx;
          right: 50%;
          z-index: 500;
        }
      }
    }
  }
</style>